<template>
  
    <el-table row-key="key" :key="tableKey"  :data="tableList" ref="refTable"  @selection-change="handleSelectionChange">
      <template v-for="item in columns">
         <el-table-column v-if="item.visible && item.type" :label="item.type=='index'?'序号':''" :type="item.type" :key="item.key" width="55"
                         align="center"
        ></el-table-column>
        <el-table-column :key="item.key" v-if="item.visible && !item.type" :class-name="item.className"
                         :prop="item.prop"
                         :label="item.label" :align="item.align" :type="item.type" :width="item.width" :fixed="item.fixed"
        >
         
          <template  slot-scope="scope">
            <!-- 图片 -->
             <template v-if="item.htmlType == 'imageUpload' && item.visible">
              <image-preview :src="scope.row[scope.item.prop]" :width="50" :height="50"/>
            </template>
            <!-- 时间戳转换 -->
           <template v-else-if="item.htmlType == 'datetime' && item.visible">
            <span>{{ parseTime(scope.row[item.prop], '{y}-{m}-{d}  {h}:{i}:{s}') }}</span>
          </template>
          <!-- 字典 -->
           <!-- <template v-else-if="item.htmlType=='select'&&item.visible">
             <dictTag  :options="dict.type[item.dictType]" :value="scope.row[item.prop]"/>
           </template> -->

        
          <template v-else-if="item.htmlType =='operation'">
            <slot name="operation" :scope="scope"></slot>
          </template>
          <template v-else>
            <span>{{ scope.row[scope.column.property] }}</span>
          </template>
          </template>
        </el-table-column>
      </template>

    </el-table>
    

</template>

<script>
import Sortable from "sortablejs";
// import moment from 'moment'
import { setStorageItem, getStorageItem } from '@/utils/localStorage.js'
import dictTag from '@/components/DictTag'

export default {
  components:{
    dictTag
  },
  dicts:[],
  props:{
    name:{
         type:String,
         required:true
    },
    tableList:{
      type:Array,
      default:[]
    },
    columnsList:{
      type:Array,
      required:true
    }
  },
  data(){
    return{
      tableKey:'',
      ids: [],
      columns:null
    }
  },
  created() {
      

      let data = getStorageItem(this.name)
      if(data) {
        this.columns=data
      }else {
         this.columns=this.columnsList
      }
      
      
     
      
    }, mounted() {
       this.$nextTick(()=>{
         this.columnDrop();
       })
    },
  methods:{
       //列拖拽
      columnDrop() {
        const wrapperTr = this.$refs.refTable.$el.querySelector('.el-table__header-wrapper tr');
        this.sortable = Sortable.create(wrapperTr, {
          animation: 180,
          delay: 30,
          // draggable: ".drag",
          onEnd: evt => {
            if (evt.oldIndex === evt.newIndex) return;
            const oldItem = this.columns[evt.oldIndex];
            const newItem = this.columns[evt.newIndex];
            this.$set(this.columns, evt.newIndex, oldItem);
            this.$set(this.columns, evt.oldIndex, newItem);
            setStorageItem(this.name, this.columns)
            this.reDrawTable()
          },
        });
      },
      reDrawTable() {
      this.tableKey = Math.random();
        this.$nextTick(() => {
          this.columnDrop();
        });
      },
      dataChange(data){
        for (let item in this.columns) {
          const key = this.columns[item].key;
          this.columns[item].visible = !data.includes(key);
        }

        setStorageItem(this.name, this.columns)
      },
          // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)

      },
  }
}
</script>

<style>

</style>